<template>
	<view class="userInfo" @tap="selectUser(item)">
		<checkbox class="userInfo__check" v-if="isSelect" :checked="checked.includes(item)" :disabled="true"/>
		<image class="avatar" :src="item.avatar" mode="aspectFit" />
		<text class="username">{{item.username}}</text>
	</view>
</template>

<script setup>
	import {ref,inject} from 'vue';
	import {navigate} from '@/hooks/navigate.js'
	const props = defineProps({
		item: {
			type: Object,
			required: true,
		},
		isSelect: {
			type: Boolean,
			default: false
		}
	})
	const checked = inject("checked")
	function selectUser(item) {
		if (props.isSelect) {
			let index = checked.value.findIndex(i => i.id == item.id)
			if (index >= 0) {
				checked.value.splice(index, 1)
			} else {
				checked.value.push(item);
			}
		} else {
			// 跳转页面
			// console.warn("跳转页面",props.item)
			navigate("/pages/chat-detail/chat-detail",{item:props.item})
			
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		display: flex;
		align-items: center;
		gap: 25upx;
		padding: 20upx 10upx;
		border-bottom: 1upx solid #eee;
		background-color: #ffffff;

		&__check {
			display: flex;

			:deep(.uni-checkbox-input) {
				border-radius: 50% !important;
			}
		}
		:deep(.uni-checkbox-input){
			background-color: white;
		}

		&:active {
			background-color: #aaa;
		}

		.avatar {
			width: 60upx;
			height: 60upx;
			border-radius: 4upx;
			margin-right: 30upx;
		}

		.username {
			font-family: "PingFang SC Medium";
			font-size: 30upx;
		}

	}
</style>